<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>服务器总页面</title>
    <link rel="stylesheet" href="../../static/css/default.css">
    <link rel="stylesheet" href="../../static/css/plujins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <!--    <link rel="stylesheet" href="../../static/css/signin.css">-->
    <!--    <link rel="stylesheet" href="../../static/css/loginBootstrap.css">-->
    <script src="../../static/script/jquery-3.6.0.min.js"></script>
    <script src="../../static/css/plujins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="../../static/script/leader-line.min.js"></script>
    <script src="../../static/script/tools.js"></script>
    <script>
        $(function () {
            $("#username").blur(function () {//失去焦点行为
                //$(this).val();
                $.ajax({
                    type: "post",
                    url: "<%=basepath%>userServlet?action=ajaxExistUsername",
                    data: $('form').serialize(), //它可以把表单用name序列化成一个字符串
                    success: function (response, status, xhr) {
                        //console.log(response)
                        var jsonObj = JSON.parse(response);
                        //var jsonObj=$.parseJSON( response )
                        //console.log(typeof (jsonObj));
                        //console.log(jsonObj["existsUsername"]);//js中的json对象要这样读
                        if (jsonObj["existsUsername"]) {
                            $(".errorMsg").text("用户名不可用")
                        } else {
                            $(".errorMsg").text("用户名可用")
                        }
                    },
                    timeout: 10000, //如果超时1000毫秒，就结束
                    error: function (xhr, errorText, errorType) { //错误后的行为
                        console.log("errorText:" + errorText); //error
                        console.log("errorType:" + errorType); //not found
                        console.log("xhr.status:" + xhr.status); //404
                        console.log("xhr.statusText:" + xhr.statusText); //not found
                    },
                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用
                })
            })
        })
    </script>
</head>
<body>

<div class="container-fluid ">
    <div class="center-block" >
        <div class="row" style="background: black;color: white;font-size: 18px;height: 30px;line-height: 30px">
            <strong class="col-md-2 " style="padding-left: 50px;font-size: 24px">CMDB</strong>
            <div class="col-md-5 col-md-offset-5">
                <div class="col-md-4 col-md-offset-6">
                    欢迎, <a href="#">admin</a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="btn btn-info btn-sm" style="height: 28px">退出</a>
                </div>

            </div>
        </div>
    </div>
    <div class="center-block" >
        <ul class="nav nav-tabs">
            <li class=" col-md-2" style="padding: 0;text-align: center"><a href="#" class="col-md-12 active" style=";font-size: 24px">服务器</a></li>
            <li class=" col-md-2" style="padding: 0;text-align: center "><a href="#" style=";font-size: 24px">docker</a></li>
            <li class=" col-md-2" style="padding: 0;text-align: center "><a href="#" style=";font-size: 24px">vm</a></li>
            <li class=" col-md-2" style="padding: 0;text-align: center "><a href="#" style=";font-size: 24px">nginx代理记录</a></li>
            <li class=" col-md-2" style="padding: 0;text-align: center "><a href="#" style=";font-size: 24px">服务依赖记录</a></li>
        </ul>
    </div>
    <div class="center-block" >
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px">
                <li class="text-center"><a href="#" >服务</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px">
                <li class="text-center"><a href="#">docker内服务</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px">
                <li class="text-center"><a href="#">vm内服务</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px">
                <li class="text-center"><a href="#">nginx代理拓扑</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px">
                <li class="text-center"><a href="#">服务依赖拓扑</a></li>
            </ul>
        </div>
    </div>
</div> <!--欢迎行-->

<div class="container-fluid">
    这个页面是用于展示这台服务器里有哪些服务和容器或kvm的
</div>
<div class="container-fluid " style="position: relative">
    <table class="table table-striped table-bordered table-hover hidden " style="table-layout:inherit">
        <thead>
        <tr >
            <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
            <th class="col-md-1 "><input type="checkbox" id="selectall" onchange="selectall(this)" > 全选</th>
            <th class="col-md-1">编号</th>
            <!--                <th>图标</th>-->
            <th class="col-md-1">名称</th>
            <th class="col-md-1">ip</th>
            <th class="col-md-1">服务 / 容器</th>
            <th class="col-md-1">cpu / memory</th>
            <th class="col-md-1">disk</th>
            <th class="col-md-1">有效期</th>
            <th class="col-md-1 text-center">操作
                <a class="btn btn-default btn-sm glyphicon glyphicon-plus" href="#"></a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr class="tr">
            <td>
                <input type="checkbox">
                1
            </td>
            <td class="id">1</td>
            <td class="name">济宁</td>
            <td class="ip">1.1.1.1</td>
            <td class="objectChild">
                <form class="bs-example bs-example-form dropdownAndInputForm" role="form">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group ">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="text">一级</span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdownAndInput">
                                        <li>
                                            <a  class="option">nginx</a>
                                        </li>
                                        <li>
                                            <a  class="option">php</a>
                                        </li>
                                        <li>
                                            <a  class="option">mysql</a>
                                        </li>
                                        <li>
                                            <a  class="option">docker</a>
                                        </li>
                                        <li>
                                            <a  class="option">kvm</a>
                                        </li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="changeDiv "  style="width: 150px">
                                    <input  type="text" class="form-control input" >
                                </div><!--/chengrDiv-->
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </form>
            </td>
            <td class="cpuAndMemory">4c / 4G</td>
            <td class="disk">500G</td>
            <td class="endTime">2020-1-1</td>
            <td class="function">
                <div class="btn-group center-block center-block">
                    <a class="btn btn-default glyphicon glyphicon-pencil edit" href="#"></a>
                    <a class="btn btn-default glyphicon glyphicon-ok update" href="#"></a>
                    <a class="btn btn-default glyphicon glyphicon-remove delete" href="#"></a>
                </div>
            </td>
        </tr>
        </tbody>
    </table><!--废弃的服务器表-->
    <table class="table table-striped table-bordered table-hover hidden  " style="table-layout:inherit">
        <thead>
        <tr >
            <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
            <th class="col-md-1 "><input type="checkbox" id="selectall2" onchange="selectall(this)" > 全选</th>
            <th class="col-md-1">编号</th>
            <!--                <th>图标</th>-->
            <th class="col-md-1">名称</th>
            <th class="col-md-1">ip</th>
            <th class="col-md-1">cpu / memory</th>
            <th class="col-md-1">disk</th>
            <th class="col-md-1">有效期</th>
            <th class="col-md-1 text-center detail">操作
                <a class="btn btn-default btn-sm glyphicon glyphicon-plus create" href="#"></a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr class="tr">
            <td>
                <input type="checkbox">
                <span class="number">1</span>
            </td>
            <td class="id">1</td>
            <td class="name">
                <a class="btn btn-default center-block" href="#" role="button" >济宁</a>
            </td>
            <td class="ip">1.1.1.1</td>
            <td class="cpuAndMemory">4c / 4G</td>
            <td class="disk">500G</td>
            <td class="endTime">2020-1-1</td>
            <td class="detail">
                <div class="btn-group center-block center-block">
                    <a class="btn btn-default glyphicon glyphicon-pencil edit" href="#"></a>
                    <a class="btn btn-default glyphicon glyphicon-ok update" href="#"></a>
                    <a class="btn btn-default glyphicon glyphicon-remove delete" href="#"></a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

        <div id="start"   class="btn btn-default target">start</div>
        <div id="end"     class="btn btn-default target">end</div>
        <div id="start2"  class="btn btn-default target">start2</div>
        <div id="end2"    class="btn btn-default target">end2</div>

    <script>
        var startEle = document.getElementById('start');
        var endEle = document.getElementById('end');
        // var startEle2 = document.getElementById('start2');
        var endEle2 = document.getElementById('end2');
        // startEle.style.position="relative"
        endEle.style.position="absolute"
        endEle.style.left=getLeft(startEle)+200+"px"
        endEle.style.top=startEle.offsetTop+startEle.clientHeight+2+"px"


        // startEle2.style.position="relative"
        // startEle2.style.left=startEle.style.left
        // startEle2.style.top=endEle.style.top
        //
        endEle2.style.position="absolute"
        endEle2.style.left=getLeft(startEle)+200+"px"
        endEle2.style.top=startEle.offsetTop+startEle.clientHeight+50+"px"
        //
        let leader_line=f(startEle,endEle,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");
        let leader_line2=f(startEle,endEle2,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");
        //
        // const leader_line2 = f(startEle2, endEle2, kaishiyanse = '#ff3792', jieshuyanse = '#fff386', yanshi = "shixian");
        //
        // let leader_line3=f(startEle,endEle2,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");
        //
        // let boxObj=document.getElementById("box")
        // boxObj.onmouseover=function (event) {//这个this是事件触发的元素
        //     if(event.target.classList.contains('target')){
        //         let add=document.createElement("div")
        //         add.style.position="absolute" //relative absolute
        //         add.style.left=event.target.offsetLeft+event.target.offsetWidth+"px"
        //         add.style.top=event.target.offsetTop+event.target.offsetHeight-30+"px"
        //         add.style.width=50+"px"
        //         add.style.height=30+"px"
        //         add.style.background="green"
        //         add.id=event.target.id+"AddId"
        //         add.innerHTML="create"
        //
        //         boxObj.append(add)
        //     }
        // }
        // boxObj.onmouseout=function(event) {//这个this是事件触发的元素
        //     if(event.target.classList.contains('target')){
        //         var addEle = document.getElementById(event.target.id + "AddId");
        //         var x = event.clientX;
        //         var y = event.clientY;
        //         var divx1 = addEle.offsetLeft;  //距离边界的距离
        //         var divy1 = addEle.offsetTop; //距离边界的距离
        //         var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离
        //         var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离
        //         if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
        //             //鼠标小于左上点横方向
        //             //鼠标大于右下点横方向
        //             //鼠标小于左上点竖方向
        //             //鼠标大于右下点竖方向
        //             //此时鼠标不在这个模块中
        //             //那就可以删除了
        //             boxObj.removeChild(addEle)
        //         } else {
        //             //否则,鼠标在这个addEle模块中
        //             //那就不删除
        //
        //             addEle.onclick = function (event) {
        //                 let newDiv = document.createElement("div")
        //                 //获取当前对象的位置
        //                 var addDivX = this.offsetLeft
        //                 var addDivY = this.offsetTop
        //                 newDiv.style.position = "absolute"
        //                 newDiv.style.left = this.offsetLeft + this.offsetWidth + "px"
        //                 newDiv.style.top = this.offsetTop + this.offsetHeight + 30 + "px"
        //                 newDiv.style.width = 50 + "px"
        //                 newDiv.style.height = 30 + "px"
        //                 newDiv.style.background = "#00FF00"
        //                 newDiv.id = this.id.replace("AddId", "") + "NewDiv"
        //                 newDiv.className="target"
        //
        //                 boxObj.append(newDiv)
        //                 let newDivLeadLine=f(document.getElementById(this.id.replace("AddId", "")),newDiv,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");
        //             }
        //             addEle.onmouseout = function (event) {
        //                 event.cancelBubble=true;//事件取消冒泡
        //                 boxObj.removeChild(event.target)
        //                 // this.id.replace("AddId", "")
        //                 // let divObj = document.getElementById(this.id.replace("AddId", ""));
        //                 // console.log(divObj)
        //                 // let x = event.clientX;
        //                 // let y = event.clientY;
        //                 // let divx1 = divObj.offsetLeft;  //距离边界的距离
        //                 // let divy1 = divObj.offsetTop; //距离边界的距离
        //                 // let divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离
        //                 // let divy2 = divObj.offsetTop + divObj.offsetHeight; //右下点距离边界的距离
        //                 // if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
        //                 //     //移出了divObj,删除add模块
        //                 //     boxObj.removeChild(this)
        //                 // } else {//这说明,鼠标虽然移出了addDiv,但是马上进入了divObj区域内.说简单点就是,鼠标又回去了
        //                 //     //没移出divObj,不删除
        //                 // }
        //             }
        //         }
        //     }
        //     // var addEle = document.getElementById(event.target.id + "AddId");
        //     // var x = event.clientX;
        //     // var y = event.clientY;
        //     // var divx1 = addEle.offsetLeft;  //距离边界的距离
        //     // var divy1 = addEle.offsetTop; //距离边界的距离
        //     // var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离
        //     // var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离
        //     // if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
        //     //     //鼠标小于左上点横方向
        //     //     //鼠标大于右下点横方向
        //     //     //鼠标小于左上点竖方向
        //     //     //鼠标大于右下点竖方向
        //     //     //此时鼠标不在这个模块中
        //     //     //那就可以删除了
        //     //     boxObj.removeChild(addEle)
        //     //  } else {
        //     // //     //否则,鼠标在这个模块中
        //     // //     //那就不删除
        //     // //     addEle.onclick = function (event) {
        //     // //         let newDiv = document.createElement("div")
        //     // //         //获取当前对象的位置
        //     // //         var addDivX = this.offsetLeft
        //     // //         var addDivY = this.offsetTop
        //     // //         newDiv.style.position = "absolute"
        //     // //         newDiv.style.left = this.offsetLeft + this.offsetWidth + "px"
        //     // //         newDiv.style.top = this.offsetTop + this.offsetHeight + 30 + "px"
        //     // //         newDiv.style.width = 50 + "px"
        //     // //         newDiv.style.height = 30 + "px"
        //     // //         newDiv.style.background = "#00FF00"
        //     // //         newDiv.id = this.id.replace("AddId", "") + "NewDiv"
        //     // //         document.body.append(newDiv)
        //     // //     }
        //     // //     addEle.onmouseout = function (event) {
        //     // //         this.id.replace("AddId", "")
        //     // //         var divObj = document.getElementById(this.id.replace("AddId", ""));
        //     // //         var x = event.clientX;
        //     // //         var y = event.clientY;
        //     // //         var divx1 = divObj.offsetLeft;  //距离边界的距离
        //     // //         var divy1 = divObj.offsetTop; //距离边界的距离
        //     // //         var divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离
        //     // //         var divy2 = divObj.offsetTop + divObj.offsetHeight; //右下点距离边界的距离
        //     // //         if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
        //     // //             //移出了divObj,删除add模块
        //     // //             document.body.removeChild(this)
        //     // //         } else {
        //     // //             //没移出divObj,不删除
        //     // //         }
        //     // //     }
        //     // }
        // }
        //
        //
        // // objs=document.getElementsByClassName("target")
        // // for(var i in objs){
        // //     //为每个div添加了add模块
        // //     objs[i].onmouseover = function (){
        // //         let add=document.createElement("div")
        // //         add.style.position="absolute" //relative absolute
        // //         add.style.left=this.offsetLeft+this.offsetWidth+"px"
        // //         add.style.top=this.offsetTop+this.offsetHeight-30+"px"
        // //         add.style.width=50+"px"
        // //         add.style.height=30+"px"
        // //         add.style.background="green"
        // //         add.id=this.id+"AddId"
        // //         add.innerHTML="create"
        // //
        // //         document.body.append(add)
        // //
        // //         // console.log("add图标的横坐标:"+add.style.left,"add图标的纵坐标:"+add.style.top)
        // //         // console.log("大div的左上角坐标为:"+this.offsetLeft,this.offsetTop)
        // //         // console.log("大div的宽度和高度是:"+this.offsetWidth,this.offsetHeight)
        // //         // console.log("大div的右下角坐标为:"+(this.offsetLeft+this.offsetWidth),(this.offsetTop+this.offsetHeight))
        // //         // console.log("小div的左上角坐标为:"+(this.offsetLeft+this.offsetWidth-10),(this.offsetTop+this.offsetHeight-10))
        // //     }
        // //     //当鼠标移出div模块时,add模块也随之消失;这里面有矛盾!
        // //     //当鼠标移出div时,进入add模块后,add模块不应该消失
        // //     //当鼠标移出div,并没有进入add模块时,add模块应该消失
        // //         //关键点在于判断,移出div时,是否进入add模块
        // //     objs[i].onmouseout=function(event){
        // //         var addEle = document.getElementById(this.id+"AddId");
        // //         var x=event.clientX;
        // //         var y=event.clientY;
        // //         var divx1 = addEle.offsetLeft;  //距离边界的距离
        // //         var divy1 = addEle.offsetTop; //距离边界的距离
        // //         var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离
        // //         var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离
        // //         if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
        // //             //鼠标小于左上点横方向
        // //             //鼠标大于右下点横方向
        // //             //鼠标小于左上点竖方向
        // //             //鼠标大于右下点竖方向
        // //             //此时鼠标不在这个模块中
        // //             //那就可以删除了
        // //             document.body.removeChild(addEle)
        // //         }else{
        // //             //否则,鼠标在这个模块中
        // //             //那就不删除
        // //             addEle.onclick=function (event) {
        // //                 let newDiv=document.createElement("div")
        // //                 //获取当前对象的位置
        // //                 var addDivX = this.offsetLeft
        // //                 var addDivY = this.offsetTop
        // //                 newDiv.style.position="absolute"
        // //                 newDiv.style.left=this.offsetLeft+this.offsetWidth+"px"
        // //                 newDiv.style.top=this.offsetTop+this.offsetHeight+30+"px"
        // //                 newDiv.style.width=50+"px"
        // //                 newDiv.style.height=30+"px"
        // //                 newDiv.style.background="#00FF00"
        // //                 newDiv.id=this.id.replace("AddId", "")+"NewDiv"
        // //                 document.body.append(newDiv)
        // //             }
        // //             addEle.onmouseout=function (event) {
        // //                 this.id.replace("AddId", "")
        // //                 var divObj = document.getElementById(this.id.replace("AddId", ""));
        // //                 var x=event.clientX;
        // //                 var y=event.clientY;
        // //                 var divx1 = divObj.offsetLeft;  //距离边界的距离
        // //                 var divy1 = divObj.offsetTop; //距离边界的距离
        // //                 var divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离
        // //                 var divy2 = divObj.offsetTop +  divObj.offsetHeight; //右下点距离边界的距离
        // //                 if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
        // //                     //移出了divObj,删除add模块
        // //                     document.body.removeChild(this)
        // //                 }else{
        // //                     //没移出divObj,不删除
        // //                 }
        // //             }
        // //         }
        // //     }
        // // }
    </script>
    <form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form"> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">二级</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdownAndInput">
                            <li>
                                <a class="option">nginx</a>
                            </li>
                            <li>
                                <a  class="option">php</a>
                            </li>
                            <li>
                                <a  class="option">mysql</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input  type="text" class="form-control input"  style="width: 100px">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true"><!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true"><!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->
</div>

</body>
<script>
    $("table").click(function (event){//detail 操作模块的点击事件,利用冒泡
        let eventTarget=$(event.target);
        if(eventTarget.hasClass('edit')){//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
            let trObj=eventTarget.closest(".tr");//下一步,把tr每一项作为input,等待修改:策略->"td不多,根据class获取td;根据td.innhtml获取text,作为input的value"
            trObj.children().each(function (index,element){
                let inputCreate=document.createElement("input");
                inputCreate.className="form-control"
                switch ($(element).attr("class")){
                    case "id":
                        inputCreate.classList.add("idEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "name":
                        inputCreate.classList.add("nameEdit");
                        inputCreate.value=$(element).find("a")[0].innerHTML;
                        $(element).html('').append(inputCreate);
                        break;
                    case "ip":
                        inputCreate.classList.add("ipEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "cpuAndMemory":
                        inputCreate.classList.add("cpuAndMemoryEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "disk":
                        inputCreate.classList.add("diskEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "endTime":
                        inputCreate.classList.add("endTimeEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    default:
                    // console.log('default')
                }
            })
        }//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
        if(eventTarget.hasClass('create')){//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
            if(eventTarget.closest("table").children("tbody").children("tr:last").find(".form-control:first").hasClass("idEdit")){
                confirm("修改状态下不允许添加")
            }else{
                let newEle=eventTarget.closest("table").children("tbody").children("tr:last").clone()
                $(newEle).find(".number:first").html(parseInt(($(newEle).find(".number:first").html()))+1);
                $(newEle).children(".id").html(parseInt(($(newEle).children(".id").html()))+1);
                eventTarget.closest("table").children("tbody").append(newEle);
            }
        }//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
        if(eventTarget.hasClass('update')){//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("idEdit")){
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            }else{
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if(eventTarget.hasClass('delete')){//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("idEdit")){
                if(confirm("打开状态下,不允许删除;现在刷新页面")){
                    location.reload();
                }
            }else{
                $("#delete").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            }
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
    })//table 的点击事件,利用冒泡
    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        console.log(1)
        let eventTarget=$('.yaotijiaodedian')
        let trObj = {};
        let arr = ["id", "name", "ip", "cpuAndMemory", "disk", "endTime"];
        eventTarget.closest("tr").find("input").each(function (index, element) { //构建tr-json对象
            //如果有idEdit,就为id赋值
            // if ($(element).hasClass("idEdit")){
            //     trObj["id"]=$(element).val()
            // }
            for (let i in arr) { //不写这个就要把上面的这个if写5次
                if ($(element).hasClass(arr[i] + "Edit")) {
                    trObj[arr[i]] = $(element).val()
                }
            }//不写这个就要把上面的这个if写5次
        })//构建tr-json对象
        $.ajax({
            type: "post",
            url: "<%=basepath%>serverServlet?action=ajaxAddItem",
            data: trObj,
            success: function (response, status, xhr) {
                console.log("收到回信")
                //console.log(response)
                var jsonObj = JSON.parse(response);
                var jsonObj = $.parseJSON(response)
                //console.log(typeof (jsonObj));
                //console.log(jsonObj["goodsName"]);//js中的json对象要这样读
                //jsonObj["count"]
                $("#cartCount").text("您的购物车中有" + jsonObj["count"] + "件商品");
                console.log("书名是:" + jsonObj["goodsName"])
                $("#welcomeAddCartItem").html("您刚刚将<span style=\"color: red\" >" + jsonObj["goodsName"] + "</span>加入到了购物车中")

            },
            timeout: 10000, //如果超时1000毫秒，就结束
            error: function (xhr, errorText, errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:" + errorText); //error
                console.log("errorType:" + errorType); //not found
                console.log("xhr.status:" + xhr.status); //404
                console.log("xhr.statusText:" + xhr.statusText); //not found
            },
            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget=$('.yaotijiaodedian')
        let trObj=eventTarget.closest(".tr");
        $.ajax({
            type:"post",
            url:"<%=basepath%>serverServlet?action=ajaxDeleteItem",
            data:{"id":trObj.children(".id:first").html()},
            success:function (response,status,xhr) {
                console.log("收到回信")
                //console.log(response)
                var jsonObj=JSON.parse(response);
                var jsonObj=$.parseJSON( response )
                //console.log(typeof (jsonObj));
                //console.log(jsonObj["goodsName"]);//js中的json对象要这样读
                //jsonObj["count"]
                $("#cartCount").text("您的购物车中有"+jsonObj["count"]+"件商品");
                console.log("书名是:"+jsonObj["goodsName"])
                $("#welcomeAddCartItem").html("您刚刚将<span style=\"color: red\" >"+jsonObj["goodsName"]+"</span>加入到了购物车中")

            },
            timeout:10000, //如果超时1000毫秒，就结束
            error:function (xhr,errorText,errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:"+errorText); //error
                console.log("errorType:"+errorType); //not found
                console.log("xhr.status:"+xhr.status); //404
                console.log("xhr.statusText:"+xhr.statusText); //not found
            },
            dataType:"text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $('.objectChild').click(function (event){
        if($(event.target).hasClass("option")){//这是确定了点击的是ul-li-a
            let htmlText=$(event.target).html();
            if(htmlText=="docker"||htmlText=="kvm"){
                let changeTargetObj=$(".changeTarget")//数据源
                changeTargetObj.find('.text').html(htmlText)//替换数据源中显示的标题为docker或kvm
                $(".changeDiv").html(changeTargetObj.html())//把数据源赋值给目标区域
            }else{//如果这个a标签的内容不是docker或kvm,就可以把a的内容赋值给input
                $(event.target).closest('.dropdownAndInputForm').find('.input').val(htmlText)

                let virtualType=$(event.target).closest('.input-group-btn').find('.text').html()
                $(event.target).closest('.dropdownAndInputForm').find('.input').attr("virtualType",virtualType)
            }
        }else{
        }
    })
</script>
<script type="text/javascript">
    // 页面加载完成之后
    $(function () {
        // 给注册绑定单击事件
        $("#sub_btn").click(function () {
            // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
            //1 获取用户名输入框里的内容
            var usernameText = $("#username").val();
            //2 创建正则表达式对象
            var usernamePatt = /^\w{5,12}$/;
            //3 使用test方法验证
            if (!usernamePatt.test(usernameText)) {
                //4 提示用户结果
                $("span.errorMsg").text("用户名不合法！");

                return false;
            }

            // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
            //1 获取用户名输入框里的内容
            var passwordText = $("#password").val();
            //2 创建正则表达式对象
            var passwordPatt = /^\w{5,12}$/;
            //3 使用test方法验证
            if (!passwordPatt.test(passwordText)) {
                //4 提示用户结果
                $("span.errorMsg").text("密码不合法！");

                return false;
            }

            // 验证确认密码：和密码相同
            //1 获取确认密码内容
            var repwdText = $("#repwd").val();
            //2 和密码相比较
            if (repwdText != passwordText) {
                //3 提示用户
                $("span.errorMsg").text("确认密码和密码不一致！");

                return false;
            }

            // 邮箱验证：xxxxx@xxx.com
            //1 获取邮箱里的内容
            var emailText = $("#email").val();
            //2 创建正则表达式对象
            var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
            //3 使用test方法验证是否合法
            if (!emailPatt.test(emailText)) {
                //4 提示用户
                $("span.errorMsg").text("邮箱格式不合法！");

                return false;
            }

            // 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
            var codeText = $("#code").val();

            //去掉验证码前后空格
            // alert("去空格前：["+codeText+"]")
            codeText = $.trim(codeText);
            // alert("去空格后：["+codeText+"]")

            if (codeText == null || codeText == "") {
                //4 提示用户
                $("span.errorMsg").text("验证码不能为空！");

                return false;
            }

            // 去掉错误信息
            $("span.errorMsg").text("");

        });

    });

</script> <!--页面加载完成之后-->
</html>